import React from 'react'
import T from '../../lib/T'
import api from '../../api'
import {connect, actions} from 'mirrorx'
import Basic from './Basic'
import Service from './Service'
import Sale from './Sale'
import Preview from './preview'
import SuccessCallback from './SuccessCallback'
class Product extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      step: 1,
      channelGoodsId: '',
      agreementGoodsId: 28,
      channelGoodsSaleInfoId: '',
      basicCompleteStaus: false,
      serviceCompleteStaus: false,
      saleCompleteStaus: false,
      promotionData: null,
      visible: false,
      postData: {},
      promotedSuccess: false,
      prdId: ''
    }
    this.save = this.save.bind(this)
    this.tab = this.tab.bind(this)
    this.showPreview = this.showPreview.bind(this)
  }
  componentDidMount () {
    let channelGoodsId = T.urlQuery('channelGoodsId') || ''
    let channelCompanyId = T.urlQuery('channelCompanyId') || ''
    let operation = T.urlQuery('operation') || ''
    // 重新发布进来编辑，定位到步骤三
    if (operation === 'republish') {
      this.setState({step: 3})
    }
    channelGoodsId && this.setState({channelGoodsId})
    let {productDetail} = this.props
    if (productDetail) {
      this.setState({
        productDetail,
        channelCompanyId: channelCompanyId || productDetail.channelCompanyId,
        agreementGoodsId: productDetail.id
      })
    }
    channelGoodsId && this.queryChannelGoods(channelGoodsId)
  }
  queryChannelGoods (channelGoodsId) {
    T.ajax({
      url: api.queryChannelGoods.path,
      data: {
        channelGoodsId
      }
    }).then((res) => {
      if (res.code === 0) {
        this.setState({
          promotionData: res.data,
          postData: res.data
        })
        let {agreementGoodsId, channelGoodsMediaDTOList, channelGoodsSaleInfoDTO, channelGoodsId, introduction} = res.data
        // 如果返回是有数据的，则认为此步骤编辑过，ProcessBar图标标记打钩。

        agreementGoodsId && this.setState({agreementGoodsId: agreementGoodsId})
        // 第一步的基本信息
        channelGoodsId && this.setState({basicCompleteStaus: true})
        // 第二步的服务信息
        if (introduction) {
          this.setState({
            serviceCompleteStaus: true,
            channelGoodsMediaDTOList: channelGoodsMediaDTOList
          })
        }
        // 第三步的销售信息。
        channelGoodsSaleInfoDTO && this.setState({saleCompleteStaus: true})
      }
    })
  }
  showPreview () {
    let {promotionData} = this.state
    this.setState({
      visible: true
    }, () => {
      this.setState({promotionData})
    })
  }
  // 保存
  save (data) {
    let {step, channelCompanyId, agreementGoodsId} = this.state
    let {fromStep} = data
    if (channelCompanyId) {
      data.channelCompanyId = channelCompanyId
    }
    if (agreementGoodsId) {
      data.agreementGoodsId = agreementGoodsId
    }
    this.setState({
      postData: data
    })
    data && T.ajax({
      url: api.addChannelGoods.path,
      loading: true,
      data: data
    }).then((res) => {
      if (res.code === 0) {
        if (res.data && res.data.channelGoodsId) {
          this.queryChannelGoods(res.data.channelGoodsId)
        }
        // 第一步 提交basic信息成功后，返回给basic作为编辑使用的id。
        if (fromStep === 1) {
          let {channelGoodsId} = res.data
          if (channelGoodsId) {
            this.setState({
              channelGoodsId,
              basicCompleteStaus: true // 标记第一步已经完成
            })
          }
        }
        if (fromStep === 2) {
          // 第三步提交sales信息
          this.setState({
            serviceCompleteStaus: true // 标记第三步已经完成
          })
        }
        if (fromStep === 3) {
          // 第三步提交sales信息
          let {channelGoodsSaleInfoId} = res.data.channelGoodsSaleInfoDTO
          if (channelGoodsSaleInfoId) {
            this.setState({
              channelGoodsSaleInfoId,
              saleCompleteStaus: true // 标记第三步已经完成
            })
          }
        }

        if (data.btnType === 'next') {
          this.setState({step: step + 1})
        }
        // 发布操作
        if (data.operation === 1) {
          this.setState({
            promotedSuccess: true
          })
        }
      }
    })
  }
  tab (step) {
    console.log('step', step)
    this.setState({step})
    let data = this.state.promotionData
    if (step <= 3) {
      this.setState({
        promotedSuccess: false
      })
    }
    if (data.channelGoodsId) {
      this.setState({
        basicCompleteStaus: true
      })
    }
    if (data.introduction) {
      this.setState({
        serviceCompleteStaus: true
      })
    }
    if (data.channelGoodsSaleInfoDTO) {
      this.setState({
        saleCompleteStaus: true
      })
    }
  }
  render () {
    let {step, prdId, promotionData, channelGoodsId, promotedSuccess, visible, basicCompleteStaus, serviceCompleteStaus, saleCompleteStaus} = this.state
    let {productDetail = {}} = this.props
    return <div>
      <div className='insurance-product'>
        <div className='bread-nav'>
          <span>
            <span
              onClick={() => actions.routing.push({pathname: '/'})}
              className='f14 sub-bread'>
              Insurance Product
            </span>
            <span className='mt16' style={{'color': 'rgba(0,0,0,0.65)'}}> / Publish Product
            </span>
          </span>
        </div>
        {
          !promotedSuccess
          ? <div>
            {/* Start三步上架组件 */}
            {
            step === 1
              ? <Basic
                tab={this.tab}
                showPreview={this.showPreview}
                basicCompleteStaus={basicCompleteStaus}
                serviceCompleteStaus={serviceCompleteStaus}
                saleCompleteStaus={saleCompleteStaus}
                promotionData={promotionData}
                productDetail={productDetail}
                save={this.save} />
              : step === 2
                ? <Service
                  showPreview={this.showPreview}
                  tab={this.tab}
                  basicCompleteStaus={basicCompleteStaus}
                  serviceCompleteStaus={serviceCompleteStaus}
                  saleCompleteStaus={saleCompleteStaus}
                  promotionData={promotionData}
                  save={this.save} />
                : step === 3
                  ? <Sale
                    tab={this.tab}
                    showPreview={this.showPreview}
                    basicCompleteStaus={basicCompleteStaus}
                    serviceCompleteStaus={serviceCompleteStaus}
                    saleCompleteStaus={saleCompleteStaus}
                    wrappedComponentRef={(inst) => (this.formRef = inst)}
                    promotionData={promotionData}
                    save={this.save} />
                  : ''
            }

          </div>
          : <SuccessCallback
            tab={this.tab}
            channelGoodsId={channelGoodsId} />
        }

      </div>
      {
        visible
          ? <Preview
            cancelVisible={() => this.setState({visible: false})}
            promotionData={promotionData}
            visible={this.state.visible} />
          : ''
      }
    </div>
  }
}
export default connect(state => {
  return state.productInfo
})(Product)
